<template>
  <div>

    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="16">
<!--          <el-col :span="6">-->
<!--            <el-input placeholder="请输入游乐名称" v-model="name"></el-input>-->
<!--          </el-col>-->

          <el-col :span="6">
            <el-select v-model="applyId" placeholder="请选择状态">
              <el-option
                  v-for="item in applyList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="tribeId" placeholder="请选择主办方">
              <el-option
                  v-for="item in tribeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-select v-model="typeId" placeholder="请选择活动类型">
              <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-button @click="paging(1)" type="primary" round icon="el-icon-search">查询</el-button>
          <el-button type="info" @click="clear">重置</el-button>
        </el-col>

        <!--<el-col :span="8" align="right">-->
          <!--<el-button @click="add()" type="success" icon="el-icon-plus" circle></el-button>-->
        <!--</el-col>-->
      </el-row>

    </el-card>
    <el-table
        :data="page.list"
        style="width: 100%;margin-top: 20px;">
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称">
      </el-table-column>
      <el-table-column
          prop="upBeginTime"
          label="报名开始时间">
      </el-table-column>
      <el-table-column
          prop="upEndTime"
          label="报名结束时间">
      </el-table-column>
      <el-table-column
          prop="ingBeginTime"
          label="活动开始时间">
      </el-table-column>
      <el-table-column
          prop="ingEndTime"
          label="活动结束时间">
      </el-table-column>
      <el-table-column
          prop="ingEndTime"
          label="活动结束时间">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
      >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.status==0">待审核</el-tag>
          <el-tag type="success" v-if="scope.row.status==1">审核通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="apply"
          label="人员要求"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.apply==1">全部人员</el-tag>
          <el-tag type="success" v-if="scope.row.apply==2">部落人员</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="照片"
          width="200">

        <template slot-scope="scope">
          <img :src="scope.row.photopath" width="100">

        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-link circle type="success" icon="el-icon-edit" @click="check(scope.row.id)">审核通过</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="paging"
        :current-page="page.Num"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
<!--    <el-dialog title="修改活动" v-if="dialogFormVisible1" :visible.sync="dialogFormVisible1" @close="reset">-->
<!--      <el-form :model="form" ref="form">-->
<!--        <el-form-item label="名称" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.name"  ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="详情" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.detail"  ></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="上传头像" :label-width="formLabelWidth">-->
<!--          <el-upload-->
<!--              class="upload-demo"-->
<!--              action=""-->
<!--              :auto-upload="false"-->
<!--              :on-change="handleChange"-->
<!--              :on-remove="handleRemove"-->
<!--              multiple-->
<!--              :limit="1"-->
<!--              :show-file-list="true"-->
<!--              list-type="picture-card"-->
<!--              :file-list="fileList">-->
<!--            <i class="el-icon-plus"></i>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="类型" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.typeId" >-->
<!--            <el-option-->
<!--                v-for="item in typeList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="学分" :label-width="formLabelWidth">-->
<!--          <el-input-number v-model="form.score" @change="handleChange1" :min="1" :max="10" label="数量"></el-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="地址" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.address"  ></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="最大报名人数" :label-width="formLabelWidth">-->
<!--          <el-input-number v-model="form.upMaxNum" @change="handleChange1" :min="1" :max="100" label="数量"></el-input-number>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="主办部落" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.tribeId" >-->
<!--            <el-option-->
<!--                v-for="item in tribeList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="人员范围" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.apply" >-->
<!--            <el-option-->
<!--                v-for="item in applyList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item  label="报名开始时间" :label-width="formLabelWidth">-->

<!--          <el-date-picker-->
<!--              v-model="form.upBeginTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="报名结束时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--              v-model="form.upEndTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="活动开始时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--              v-model="form.ingBeginTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="活动结束时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--              v-model="form.ingEndTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->




<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="reset">取 消</el-button>-->
<!--        <el-button type="primary" @click="saveupdate">确 定</el-button>-->

<!--      </div>-->
<!--    </el-dialog>-->

<!--    <el-dialog title="添加活动" v-if="dialogFormVisible" :visible.sync="dialogFormVisible" @close="reset">-->
<!--      <el-form :model="form" ref="form">-->
<!--        <el-form-item label="名称" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.name"  ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="详情" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.detail"  ></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="上传头像" :label-width="formLabelWidth">-->
<!--          <el-upload-->
<!--              class="upload-demo"-->
<!--              action=""-->
<!--              :auto-upload="false"-->
<!--              :on-change="handleChange"-->
<!--              :on-remove="handleRemove"-->
<!--              multiple-->
<!--              :limit="1"-->
<!--              :show-file-list="true"-->
<!--              list-type="picture-card"-->
<!--              :file-list="fileList">-->
<!--            <i class="el-icon-plus"></i>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="类型" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.typeId" >-->
<!--            <el-option-->
<!--                v-for="item in typeList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="学分" :label-width="formLabelWidth">-->
<!--          <el-input-number v-model="form.score" @change="handleChange1" :min="1" :max="10" label="数量"></el-input-number>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="地址" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.address"  ></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="最大报名人数" :label-width="formLabelWidth">-->
<!--          <el-input-number v-model="form.upMaxNum" @change="handleChange1" :min="1" :max="100" label="数量"></el-input-number>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="主办部落" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.tribeId" >-->
<!--            <el-option-->
<!--                v-for="item in tribeList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="人员范围" :label-width="formLabelWidth">-->
<!--          <el-select v-model="form.apply" >-->
<!--            <el-option-->
<!--                v-for="item in applyList"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item  label="报名开始时间" :label-width="formLabelWidth">-->

<!--          <el-date-picker-->
<!--              v-model="form.upBeginTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="报名结束时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--              v-model="form.upEndTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="活动开始时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--              v-model="form.ingBeginTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="活动结束时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--              v-model="form.ingEndTime"-->
<!--              type="datetime"-->
<!--              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
<!--        </el-form-item>-->




<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="reset">取 消</el-button>-->
<!--        <el-button type="primary" @click="saveAdd">确 定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
export default {
  name: "CrowdView",
  data(){
    return{
      applyList1:[
        {
        id:0,
          name:'待审核'
        },{
        id:1,
          name:'已审核'
        }
      ],

      applyList:[
        {
          id:1,
          name:'全部人员'
        } ,
        {
          id:2,
          name:'部落人员'
        }
      ],
      page:{},
      pageSize:5,
      form:{
        // crowdList:[]
      },
      dialogFormVisible1:false,
      dialogFormVisible:false,
      formLabelWidth:"100px",
      name:"",
      applyId:'',
      typeId:'',
      tribeId:'',
      tribeList:[],
      typeList:[],
      fileList:[],
      paths:[],

    }

  },
  methods:{

    handleChange1(value) {
      console.log(value);
    },
    check(id){
      this.$confirm('你确认成功审核此活动吗？').then(()=>{
        this.$axios.post("/activity/check?id="+id).then(resp=>{
          if (resp.data.code==200){
            this.$message.success("审核通过")
            this.paging(1)
          }else{
            this.$message.error("审核失败")
            this.paging(1)
          }
        })
      })


    },


    handleChange(file){
      this.fileList.push(file)
      console.log('handleChange(file)',this.fileList)
    },

    handleRemove(file, fileList){
      this.fileList=fileList;
      console.log('handleRemove(file,fileList)',this.fileList);
    },
    // limitNum(amount) {
    //   amount = amount
    //       .replace(/[^\d.]/g, "") //只能输入数字
    //       .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3") //只能输入两个小数
    //       .replace(/\.{2,}/g, "."); //出现多个点时只保留第一个
    //   // 第一位不让输小数点
    //   if (amount == ".") {
    //     amount = "";
    //   }
    //   // 如果第一位是0，第二位必须大于0或者小数点
    //   if (amount.substring(0, 1) == 0) {
    //     if (amount.substring(1, 2) > 0) {
    //       amount = amount.substring(1, 2);
    //     } else if (
    //         amount.substring(1, 2) === 0 ||
    //         amount.substring(1, 2) === "0"
    //     ) {
    //       amount = "0";
    //     }
    //   } else {
    //     // 如果第一位数字大于0（不等于0肯定就大于0），仅需考虑第二位是小数点的情况
    //     if (amount.indexOf(".") !== -1) {
    //       if (amount.substring(0, 1) > 0) {
    //         console.log("第一位大于0");
    //       } else {
    //         console.log("第一位等于0");
    //         if (amount.substring(2, 3) > 0) {
    //           console.log("小数点后第一位大于0");
    //         } else {
    //           console.log("小数点后第一位等于0");
    //           amount = "0.";
    //         }
    //       }
    //     } else {
    //       console.log("没有小数点，正常输入");
    //     }
    //   }
    //   this.form.price = amount;
    // },
    // add(){
    //   this.dialogFormVisible=true
    // },
    clear(){
      this.name=''
      this.typeId=''
      this.tribeId=''
      this.applyId=''
      this.paging(1)
    },
    // del(id){
    //   this.$confirm('你确认删除？').then(()=>{
    //     this.$axios.post("/activity/del?id="+id).then(resp=>{
    //       if (resp.data.code==200){
    //         this.$message.success("删除成功")
    //         this.paging(1)
    //       }else{
    //         this.$message.error("删除失败")
    //         this.paging(1)
    //       }
    //     })
    //   })
    //
    //
    // },

    // update(row){
    //   this.dialogFormVisible1=true
    //   this.form=row
    //   this.fileList.push({"url":this.form.photopath})
    // },
    paging(curPage){
      this.$axios.get("activity/list?curPage="+curPage+"&pageSize="+this.pageSize+"&name="+this.name+"&typeId="+this.typeId+"&tribeId="+this.tribeId+"&applyId="+this.applyId).then(resp=>{
        this.page=resp.data
        this.page.list.forEach(item => {
          let date = new Date(item.upBeginTime);
          let formattedDate = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
          item.upBeginTime = formattedDate;

          let date1 = new Date(item.upEndTime);
          let formattedDate1 = `${date1.getFullYear()}-${(date1.getMonth()+1).toString().padStart(2, '0')}-${date1.getDate().toString().padStart(2, '0')} ${date1.getHours().toString().padStart(2, '0')}:${date1.getMinutes().toString().padStart(2, '0')}:${date1.getSeconds().toString().padStart(2, '0')}`;
          item.upEndTime = formattedDate1;

          let date2 = new Date(item.ingBeginTime);
          let formattedDate2 = `${date2.getFullYear()}-${(date2.getMonth()+1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')} ${date2.getHours().toString().padStart(2, '0')}:${date2.getMinutes().toString().padStart(2, '0')}:${date2.getSeconds().toString().padStart(2, '0')}`;
          item.ingBeginTime = formattedDate2;

          let date3 = new Date(item.ingEndTime);
          let formattedDate3 = `${date3.getFullYear()}-${(date3.getMonth()+1).toString().padStart(2, '0')}-${date3.getDate().toString().padStart(2, '0')} ${date3.getHours().toString().padStart(2, '0')}:${date3.getMinutes().toString().padStart(2, '0')}:${date3.getSeconds().toString().padStart(2, '0')}`;
          item.ingEndTime = formattedDate3;
        });
        console.log("this.page",this.page)

      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    reset(){
      this.dialogFormVisible=false;
      this.dialogFormVisible1=false;
      this.form={}
      this.fileList=[]

    },
    // saveAdd(){
    //   console.log(this.form)
    //   var fd=new FormData()
    //   Object.keys(this.form).forEach(key=> {
    //
    //     fd.append(key, this.form[key])
    //
    //   })
    //   fd.append('status',0)
    //
    //   //文件上传
    //   if (this.fileList.length > 0) {
    //     this.fileList.forEach(file=>{
    //       fd.append('photo',file.raw)
    //     })
    //   }else {
    //     this.$alert("请上传图片")
    //     return
    //   }
    //   this.$axios.post('/activity/add/',fd).then(resp=>{
    //     if (resp.data.code==200){
    //       this.$message.success(resp.data.message)
    //       this.reset()
    //       this.paging(1)
    //       location.reload();
    //     }else{
    //       this.$message.error(resp.data.message)
    //       this.reset()
    //       this.paging(1)
    //       location.reload();
    //     }
    //
    //
    //   })
    // },
    refreshPage() {
      // 执行完操作后调用location.reload()方法刷新页面
      location.reload();
    },
    // saveupdate(){
    //   console.log(this.form)
    //   var fd=new FormData()
    //   Object.keys(this.form).forEach(key=> {
    //     if (key !=='activityType' && key!=='tribe') {
    //       fd.append(key, this.form[key])
    //     }
    //
    //
    //   })
    //
    //   //文件上传
    //   if (this.fileList.length > 0) {
    //     this.fileList.forEach(file=>{
    //       if(!file.raw && file.url.indexOf('blob')===-1){
    //         this.paths.push(file.url)
    //       }
    //       else {
    //         fd.append('photo',file.raw)
    //       }
    //     })
    //     fd.append("paths",this.paths)
    //   }else {
    //     this.$alert("请上传图片")
    //     return
    //   }
    //   this.$axios.post('/activity/update/',fd).then(resp=>{
    //     if (resp.data.code==200){
    //       this.$message.success(resp.data.message)
    //       this.reset()
    //       this.paging(1)
    //       location.reload();
    //     }else{
    //       this.$message.error(resp.data.message)
    //       this.reset()
    //       this.paging(1)
    //       location.reload();
    //     }
    //
    //
    //   })
    //
    // },

    getTribeList(){
      this.$axios.post("/tribe/list").then(resp=>{
        this.tribeList=resp.data.list
      })
    },

    getTypeList(){
      this.$axios.post("/activityType/list").then(resp=>{
        this.typeList=resp.data.list
      })
    }

  },
  created() {
    this.paging(1)
    this.getTribeList()
    this.getTypeList()

  }
}
</script>

<style scoped>

</style>
